---
title: Checkbox Options
nav_title: Checkbox Options
tags: demo
---


{% from "demo.njk" import demo %}
{% from "macro_config.njk" import config_table %}


{% set label %}
<label class="h2 mb-3">
	Example
</label>
{% endset %}

{% set html %}
<select id="ex-checkbox-options" autocomplete="off" multiple>
	<option>amazing</option>
	<option selected>awesome</option>
	<option>cool</option>
	<option selected>excellent</option>
	<option>great</option>
	<option>neat</option>
	<option>superb</option>
	<option>wonderful</option>
</select>
{% endset %}

<script>
{% set script %}
new TomSelect('#ex-checkbox-options',{
	plugins: {
		'checkbox_options': {
			'checkedClassNames':   ['ts-checked'],
			'uncheckedClassNames': ['ts-unchecked'],
		}
	},
});
{% endset %}
</script>

{{ demo( label, html, script) }}


<h2>Plugin Configuration</h2>
{{ config_table([
		{name:'className',desc:'<p>Search CSS class for the checkbox</p>',type:'string',default:'tomselect-checkbox'},
		{name:'checkedClassNames',desc:'<p>The CSS classes the checkbox has if it was checked</p>',type:'string[]',default:undefined},
		{name:'uncheckedClassNames',desc:'<p>The CSS classes the checkbox has if it was not checked</p>',type:'string[]',default:undefined}
	])
}}